<template>
  <a-layout class="custom-layout-trigger">
    <div id="fixed-stuff" style="width: 200px"></div>
    <a-layout-sider
        class="custom-layout-sider"
        v-model="collapsed"
        :trigger="null"
        collapsible
    >
      <div class="logo" @click="logoClick"></div>
      <div class="custom-menu">
        <custom-menu></custom-menu>
      </div>
    </a-layout-sider>
    <a-layout class="custom-layout">
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="onCollapsed"
        />
        <custom-breadcrumb></custom-breadcrumb>
        <div class="custom-layout-header-operation">
          <custom-avatar-dropdown></custom-avatar-dropdown>
          <custom-language-dropdown></custom-language-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content>
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import CustomMenu from "@/components/NavMenu";
import Breadcrumb from "@/components/Breadcrumb";
import AvatarDropdown from "@/components/HeadDropdown/AvatarDropdown.vue";
import LanguageDropdown from "@/components/HeadDropdown/LanguageDropdown.vue";

export default {
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    onCollapsed() {
      this.collapsed = !this.collapsed;
      let fixedStuff = document.getElementById("fixed-stuff");
      if (this.collapsed) {
        fixedStuff.style.width = "80px";
      } else {
        fixedStuff.style.width = "200px";
      }
    },
    logoClick() {
      this.$router.push({path: "/"});
    },
  },
  components: {
    "custom-menu": CustomMenu,
    "custom-breadcrumb": Breadcrumb,
    "custom-avatar-dropdown": AvatarDropdown,
    "custom-language-dropdown": LanguageDropdown
  },
};
</script>
<style lang="stylus">
@import '~@/assets/stylus/index.styl';

.custom-layout-trigger {
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px !important;
    cursor: pointer;
    transition: color 0.3s;

    &hove:hover {
      color: #1890ff;
    }
  }

  .logo {
    height: 32px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }

  #fixed-stuff {
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.2s;
    visibility: hidden;
  }
}

.custom-layout-sider {
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  overflow: hidden;

  .custom-menu {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 64px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: hsla(0, 0%, 100%, 0.2);
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 5px hsl(0deg 0% 100% / 5%);
    }
  }
}

.custom-layout {
  min-height: 100vh;

  .ant-layout-header {
    .custom-breadcrumb {
      margin-top: -8px;
      vertical-align: middle;
    }

    .custom-layout-header-operation {
      float: right;
      margin-right: 20px;

      .custom-head-dropdown {
        display: inline-block;
        cursor: pointer;

        .ant-dropdown-trigger {
          padding: 0 12px;
          box-sizing: border-box;
        }

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
  }

  .ant-layout-content {
    margin: 24px 16px;
    padding: 24px;
    background: rgb(255, 255, 255);
    min-height: 280px;
  }
}
</style>
